<template>
  <div class="inventory-plan-change-stock-number-info-block">
    <s-table
      ref="table"
      :columns="columns"
      :data="loadData"
      :alert="true"
      rowKey="tableRowKey"
      :pageSize="queried.PageSize"
      :pageSizeOptions="['5','10','20','30']"
      :rowSelection="null">
      <template class="table-operator" slot="operator" >
        <span style="font-weight:bold;cursor:default;"><a style="cursor:default;">{{orderNo}}</a>单据详情</span>
        <a-button type="primary" style="margin-left:10px;" :disabled="!hasPerm('inventory_plan_stock_number_change')" @click="onUpdate">更新库存</a-button>
      </template>
      <template slot="index" slot-scope="text,record,index">{{(queried.PageNo-1)*queried.PageSize+(index+1)}}</template>
      <template slot="inputCell" slot-scope="text,record,index">
        <a-input-number v-model="record.stockNumber" :min="0" />
      </template>
      <span slot="materialTyleSlot" slot-scope="text">{{ 'material_type' | dictType(text) }}</span>
    </s-table>
  </div>
</template>

<script>
import { STable } from '@/components'
import { InventoryPlanDetailPage, InventoryChangeStockNumber } from '@/api/modular/main/InventoryPlanManage'
const pagination = {PageNo:1,PageSize:5}
export default {
  name:'inventoryPlanChangeStockNumberInfoBlock',
  emits:["callback"],
  components:{STable},
  props:{
    queryId:{
      type:[Number,null],
      default:null
    },
    orderNo:{
      type:String,
      default:''
    }
  },
  data(){
    return {
      columns:[
        { title: '序号', key: 'index', width: 70, align:'center', fixed:"left", scopedSlots: { customRender: 'index' }},
        { title: '容器编号', dataIndex: 'containerCode', key: 'containerCode' },
        { title: '库位编号', dataIndex: 'placeCode', key: 'placeCode' },
        { title: '物料编码', dataIndex: 'materialCode', key: 'materialCode' },
        { title: '物料名称', dataIndex: 'materialName', key: 'materialName' },
        { title: '物料类型', dataIndex: 'materialType', key: 'materialType', width: 120, scopedSlots: { customRender: 'materialTyleSlot' }},
        { title: '库存数', key: 'stockNumber', scopedSlots: { customRender: 'inputCell' }, width: 180, align:'center' },
        { title: '盘点数', dataIndex: 'inventoryNumber',key: 'inventoryNumber' }
      ],
      queried:{...pagination},
      refreshKey:true,
      list:[]
    }
  },
  watch:{
    queryId(newV,oldV){
      if (newV!==oldV){
        this.initData()
      }
    }
  },
  methods:{
    initData(){
      this.refreshKey = true
      this.$refs.table.refresh()
    },
    loadData(parameter){
      parameter.Id = this.queryId
      if (this.queryId) {
        if (this.refreshKey) {
          parameter.pageNo = pagination.PageNo
          parameter.pageSize = pagination.PageSize
        } 
        this.refreshKey = false
        this.queried.PageNo = parameter.pageNo 
        this.queried.PageSize = parameter.pageSize 
        return InventoryPlanDetailPage(parameter).then((res) => {
          if (res.data.rows) {
            res.data.rows = res.data.rows.map((item,index)=>{
              item.tableRowKey = index
              return item
            })
            this.list = res.data.rows
          } else {
            this.list = []
          }
          return res.data
        })
      } else {
        return new Promise((resolve,reject)=>{
          resolve({
            pageNo:pagination.PageNo,
            pageSize:pagination.PageSize,
            rows:[],
            totalPage:0,
            totalRows:0
          })
        })
      } 
    },
    onUpdate(){
      this.$confirm({
        title: '确定要更新保存库存数据吗？',
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk:()=>{
          this.handleUpdate((f)=>{
            if (f) {
              this.$refs.table.refresh()
            }
          })
        }
      });
    },
    handleUpdate(callback){
      this.$loading.show()
      let params = {updateStockNumList:this.list}
      InventoryChangeStockNumber(params).then(()=>{
        this.$loading.hide()
        callback(true)
      }).catch(()=>{
        this.$loading.hide()
        callback(false)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.inventory-plan-change-stock-number-info-block{
  padding-top: 8px;
}
</style>